<template> 
    <div class="login" @keydown.enter="handleSubmit">
        <div class="login-con">
            <Card :bordered="false">
                <p slot="title">
                    <Icon type="log-in"></Icon>
                    欢迎登录-翼支付BCRM管理系统
                </p>
                <div class="form-con">
                    <Form ref="loginForm" :model="form" :rules="rules">
                        <FormItem prop="userName">
                            <Input v-model="form.userName" placeholder="请输入用户名">
                            <span slot="prepend">
                                    <Icon :size="16" type="person"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem prop="password">
                            <Input type="password" v-model="form.password" placeholder="请输入密码">
                            <span slot="prepend">
                                    <Icon :size="14" type="locked"></Icon>
                                </span>
                            </Input>
                        </FormItem>
                        <FormItem>
                            <Button @click="handleSubmit" type="primary" long>登录</Button>
                        </FormItem>
                    </Form>
                </div>
            </Card>
        </div>
    </div>
</template>
<script>
import globalMixin from '@/common/global-mixin';
import Cookies from 'js-cookie';
import { Card, Form, FormItem, Icon, Button } from 'iview';
export default {

    name: 'login',

    mixins: [globalMixin],

    components: {
        Card,
        Form,
        FormItem,
        Icon,
        Button
    },

    data() {
        return {
            form: {
                userName: '',
                password: ''
            },
            rules: {
                userName: [
                    { required: true, message: '账号不能为空', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ]
            }
        };
    },
    methods: {

        handleSubmit() {
            this.$refs.loginForm.validate((valid) => {
                if (valid) {
                    /*
                    var obj = {
                        callback:this.loginCallback,
                        arguments:this.form
                    };
                    this.$store.dispatch('login',obj).then({
    
                    });
                    */
                    //console.log(80,'handleSubmit',this);
                    this.loginCallback({});
                }
            });
        },

        loginCallback(response) {
            Cookies.set('user', this.form.userName);
            this.addMenuList('base');
            this.$router.push({
                name: 'main'
            });
        }
    }
};

</script>
<style scoped lang="less">
.login {
    width: 100%;
    height: 100%;
    /*background-image: url('https://file.iviewui.com/iview-admin/login_bg.jpg');*/
    background-size: cover;
    background-position: center;
    position: relative;
    &-con {
        position: absolute;
        right: 160px;
        top: 50%;
        transform: translateY(-60%);
        width: 300px;
        &-header {
            font-size: 36px;
            font-weight: 300;
            text-align: center;
            padding: 30px 0;
        }
        .form-con {
            padding: 10px 0 0;
        }
        .login-tip {
            font-size: 10px;
            text-align: center;
            color: #c3c3c3;
        }
    }
}

</style>
